<template>
	<view>
		<view  >
		<view v-for="item in contentList" :key="item.id" >
			<view class="contentList">
			<view class="ordercode">
				<text class="code">订单号：{{item.code}}</text><text class="state">{{item.state}}</text>
			</view>
			<view class="content1">
				<view class="pic">
					<image src="../static/order/充电宝%20(4).png" mode="" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="detail">
					<view class="introduce">
						<text>{{item.choose1}}：</text><text>{{item.place}}</text>
					</view>
					<view class="introduce">
						<text>{{item.choose2}}：</text><text>{{item.overtime}}</text>
					</view>
					<view class="introduce">
						<text class="power">已充电量：</text><text class="num">{{item.powernum}}度</text>
					</view>
				</view>
			</view>
			<view class="acount">
				<text class="sum">合计费用：</text><text class="price">￥{{item.price}}</text>
			</view>	
					
		    </view>
			<view class="btn" v-if="item.isget" :class="item.cls">
				<navigator url="payment/payment"><text style="line-height: 30px;">{{item.action}}</text></navigator>
			</view>	
		</view>
			<view class="getbottom">
			<text>我已经到底了</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"orderall",
		data() {
			return {
				contentList:[
					{id:1, code:"123199000401",state:"进行中",place:"重庆市巴南区贸易大楼",overtime:"1小时30分钟",
					 powernum:"31.0",price:"240.00",action:"立即付款",isget:true,choose1:"充电地点",choose2:"充电时长",choose3:"合计费用",cls:"btn1"
					},
					{id:2, code:"122199340402",state:"未入账",place:"2022-3-24  11:07",overtime:"2022-3-24  12:37",
					 powernum:"31.0",price:"240.00",action:"立即付款",isget:false,choose1:"开始时间",choose2:"结束时间",choose3:"收益合计",cls:"btn2"
					},	
					{id:3, code:"423199450403",state:"交易完成",place:"重庆市财政税务局住宅",overtime:"1小时20分",
					 powernum:"28.0",price:"220.00",action:"删除",isget:true,choose1:"充电地点",choose2:"充电时长",choose3:"合计费用",cls:"btn2"
					},
					{id:4, code:"526199500404",state:"交易完成",place:"2022-3-24  19:02",overtime:"2022-3-24  20:27",
					 powernum:"31.0",price:"240.00",action:"删除",isget:true,choose1:"开始时间",choose2:"结束时间",choose3:"收益合计",cls:"btn2"
					},
				]
			};
		}
	}
</script>

<style>
.contentList{
	width: 750rpx;
	height: 380rpx;
	line-height: 40rpx;
	text-align: center;
	margin-top: 20rpx;
	border-top: 20rpx solid rgba(241, 242, 248, 100) ;
	font-family: PingFangSC-regular;
	
}
.ordercode{
	width: 750rpx;
	height: 70rpx;
	display: flex;
	justify-content: space-between;

}
.code{
	color: rgba(16, 16, 16, 100);
	font-size: 24rpx;
	text-align: left;
	font-family: PingFangSC-regular;
	margin-left: 40rpx;
	line-height: 80rpx;
}
.state{
	color: rgba(255, 109, 88, 100);
	font-size: 24rpx;
	text-align: right;
	font-family: PingFangSC-regular;
	margin-right: 40rpx;
	line-height: 80rpx;
}
.content1{
	width: 750rpx;
	height: 200rpx;
	display: flex;
	flex-direction: row;
}
.pic{
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	/* background-color: #2979FF;	 */
	margin: 20rpx;
}
.detail{
	width: 500rpx;
	height: 160rpx;
	margin-top: 20rpx;	
}
.introduce{
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	width: 510rpx;
	height: 36rpx;
	color: rgba(28, 28, 30, 100);
	font-size: 32rpx;
	text-align: left;
	font-family: PingFangSC-regular;
}
.acount{
	width: 360rpx;
	height: 60rpx;
	float: right;
	margin-top: 50rpx;	
}
.sum{
	color: rgba(28, 28, 30, 100);
	font-size: 28rpx;
	text-align: left;
	font-family: PingFangSC-regular;
}
.price{
	color: rgba(255, 109, 88, 100);
	font-size: 36rpx;
	text-align: right;
	font-family: PingFangSC-regular;
}
.btn{
	width: 120rpx;
	height: 60rpx;
	border-radius: 8rpx;
	background-color: rgba(34, 149, 255, 100);
	color: rgba(255, 255, 255, 100);
	font-size: 28rpx;
	text-align: center;
	font-family: Microsoft Yahei;
	margin-left: 590rpx;
}
.btn2{
	width: 120rpx;
	height: 60rpx;
	border-radius: 8rpx;
	background-color: rgba(215, 215, 215, 100);
	color: rgba(102, 102, 102, 100);
	font-size: 28rpx;
	text-align: center;
	font-family: Microsoft Yahei;
	margin-left: 590rpx;
}
.getbottom{
	width: 750rpx;
	height: 100rpx;
	color: rgba(210, 210, 210, 100);
	font-size: 28rpx;
	text-align: center;
	font-family: PingFangSC-regular;
	background-color: #F1F2F8;
	line-height: 120rpx;
}
</style>
